<template>
    <div class="app-container">
        <el-row :gutter="10">
            <el-col>
                <el-card>
                    <el-button class="pay" @click="pay">党费缴纳</el-button>
                </el-card>
            </el-col>
            <el-col>
                <el-card>
                    <el-button type="primary" plain class="pay" @click="pay">导入</el-button>
                </el-card>
                <el-card>
                    <el-button type="primary" plain class="pay" @click="pay">导出</el-button>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col>
                <el-card>
                    <div align="center">缴费记录</div>
                    <el-table :data="text" style="width: 100%">
                        <el-table-column label="id" align="center" prop="id" />
                        <el-table-column label="createTime" align="center" prop="createTime" />
                        <el-table-column label="所属支部" align="center" prop="branch" />
                        <el-table-column label="dueproject" align="center" prop="dueproject" />
                        <el-table-column label="duecontent" align="center" prop="duecontent" />
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col>
                <el-card>
                    <div align="center">党费核准信息</div>
                    <el-table :data="text1" style="width: 100%">
                        <el-table-column label="支部名称" align="center" prop="branch" />
                        <el-table-column label="党员姓名" align="center" prop="name" />
                        <el-table-column label="党费计算基数(元)" align="center" prop="duecount" />
                        <el-table-column label="交纳比例" align="center" prop="proportion" />
                        <el-table-column label="每月应缴党费(元)" align="center" prop="due" />
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import api from '../../../api/management/api'
import { ref } from 'vue';
const text = ref([]), text1 = ref([]);
const data = {
    "szPartydue": {
        "duetype": 1,
        "branch": "支部",
        "dueproject": "党费缴纳",
        "duetime": "2023-01-01"
    },
    "sort": 0,
    "pageSize": 8,
    "pageNum": 1
};
const data1 = {
    "szDuecount": {
        "branch": "支部名称",
        "name": "党员名字"
    },
    "sort": 0,
    "pageNum": 1,
    "pageSize": 8

};
api.background_apporve_paymessage(data1).then((res) => {
    text1.value = res.data.pageInfo.list;
})
api.background_query_paymessage(data).then((res) => {
    text.value = res.data.pageInfo.list;
});

api.ljcccc();

const pay = () => {
    alert("Payment successful");
}
</script>

<style>
.pay {
    width: 100%;
}
</style>
